<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form" :model="formModel" label-width="160px" :rules="rules">
      <el-row style="text-align: center">
        <fieldset>
          <legend>车辆信息</legend>
          <div>
            <br>
            <el-col :span="12">
              <el-form-item label="信息公开编号:" label-width="200px" prop="environmentCertificateNo">
                <el-input v-model="formModel.environmentCertificateNo" :readonly="readonly" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆型号:" label-width="200px" prop="clxh">
                <el-input v-model="formModel.clxh" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商标:" label-width="200px" prop="sb">
                <el-input v-model="formModel.sb" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="汽车分类:" label-width="200px" prop="qcfl">
                <el-input v-model="formModel.qcfl" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排放阶段:" label-width="200px" prop="pfjd">
                <el-input v-model="formModel.pfjd" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆的识别方法和位置:" label-width="200px" prop="cldsbffhwz">
                <el-input v-model="formModel.cldsbffhwz" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆制造商名称:" label-width="200px" prop="clzzsmc">
                <el-input v-model="formModel.clzzsmc" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生产厂地址:" label-width="200px" prop="sccdz">
                <el-input v-model="formModel.sccdz" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="测试实验:" label-width="200px" prop="cssy">
                <el-input v-model="formModel.cssy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="基准质量:" label-width="200px" prop="jzzl">
                <el-input v-model="formModel.jzzl" />
              </el-form-item>
            </el-col>
          </div>
        </fieldset>
        <br>
        <fieldset>
          <legend>污染控制技术信息</legend>
          <div>
            <br>
            <el-col :span="12">
              <el-form-item label="发动机型号/生产企业:" label-width="250px" prop="fdjxhscqy">
                <el-input v-model="formModel.fdjxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="催化转化器型号/生产企业:" label-width="250px" prop="chzhqxhscqy">
                <el-input v-model="formModel.chzhqxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颗粒捕集器型号/生产企业:" label-width="250px" prop="klbjqxhscqy">
                <el-input v-model="formModel.klbjqxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="炭罐型号/生产企业:" label-width="250px" prop="tgxhscqy">
                <el-input v-model="formModel.tgxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="氧传感器型号/生产企业:" label-width="250px" prop="ycgqxhscqy">
                <el-input v-model="formModel.ycgqxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="曲轴箱排放控制装置型号/生产企业:" label-width="250px" prop="qzxpfkzzzxhscqy">
                <el-input v-model="formModel.qzxpfkzzzxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="EGR型号/生产企业:" label-width="250px" prop="egrxhscqy">
                <el-input v-model="formModel.egrxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="OBD系统供应商:" label-width="250px" prop="obdxtgys">
                <el-input v-model="formModel.obdxtgys" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="ECU型号/生产企业:" label-width="250px" prop="ecuxhscqy">
                <el-input v-model="formModel.ecuxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="变速器型式/档位数:" label-width="250px" prop="bsqxsdws">
                <el-input v-model="formModel.bsqxsdws" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="消声器型号/生产企业:" label-width="250px" prop="xsqxhscqy">
                <el-input v-model="formModel.xsqxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="增压器型号/生产企业:" label-width="250px" prop="zyqxhscqy">
                <el-input v-model="formModel.zyqxhscqy" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="中冷器型式:" label-width="250px" prop="zlqxs">
                <el-input v-model="formModel.zlqxs" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电动机型号/生产企业:" label-width="250px" prop="ddjxhscc">
                <el-input v-model="formModel.ddjxhscc" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="整车控制器型号/版本号/生产厂:" label-width="250px" prop="zckzqxhbbhscc">
                <el-input v-model="formModel.zckzqxhbbhscc" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="储能装置型号/生产厂:" label-width="250px" prop="cnzzxhscc">
                <el-input v-model="formModel.cnzzxhscc" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电池容量/续航里程:" label-width="250px" prop="dcrlxhlc">
                <el-input v-model="formModel.dcrlxhlc" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="汽油车符合阶段:" label-width="250px" prop="qycfhjd">
                <el-input v-model="formModel.qycfhjd" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="PN满足:" label-width="250px" prop="pnmz">
                <el-input v-model="formModel.pnmz" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="RDE值:" label-width="250px" prop="rdez">
                <el-input v-model="formModel.rdez" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="环境保护耐久性里程:" label-width="250px" prop="hjbhnjxlc">
                <el-input v-model="formModel.hjbhnjxlc" />
              </el-form-item>
            </el-col>
          </div>
        </fieldset>
        <br>
        <fieldset>
          <legend>制造商/进口企业信息</legend>
          <div>
            <br>
            <el-col :span="12">
              <el-form-item label="法人代表:" prop="frdb">
                <el-input v-model="formModel.frdb" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话:" prop="lxdh">
                <el-input v-model="formModel.lxdh" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址:" prop="dz">
                <el-input v-model="formModel.dz" />
              </el-form-item>
            </el-col>
          </div>
        </fieldset>
        <br>
        <el-col :span="12">
          <el-form-item label="状态:" prop="status">
            <hey-select v-model="formModel.status" clcd="is_effective_cd" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="submit-area">
      <el-col :span="24">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'SupplierMnt',
  props: ['pageType', 'editData'],
  data() {
    return {
      readonly: false,
      consistencyCertificateOptions: [],
      environmentListOptions: [],
      formModel: {
        environmentCertificateId: '',
        environmentCertificateNo: '',
        clxh: '',
        sb: '',
        qcfl: '',
        pfjd: '',
        cldsbffhwz: '',
        clzzsmc: '',
        sccdz: '',
        cssy: '',
        jzzl: '',
        fdjbh: '',
        fdjxhscqy: '',
        chzhqxhscqy: '',
        klbjqxhscqy: '',
        tgxhscqy: '',
        ycgqxhscqy: '',
        qzxpfkzzzxhscqy: '',
        egrxhscqy: '',
        obdxtgys: '',
        ecuxhscqy: '',
        bsqxsdws: '',
        xsqxhscqy: '',
        zyqxhscqy: '',
        zlqxs: '',
        ddjxhscc: '',
        zckzqxhbbhscc: '',
        cnzzxhscc: '',
        dcrlxhlc: '',
        qycfhjd: '',
        pnmz: '',
        rdez: '',
        hjbhnjxlc: '',
        frdb: '',
        dz: '',
        lxdh: '',
        status: '1'
      },
      // 老数据
      oldFormModel: {
      },
      rules: {}
    }
  },
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$form = this.$refs.form
      const { pageType, editData, formModel } = this
      if (pageType !== 'add') {
        this.assignData(editData, formModel)
        this.oldFormModel = JSON.parse(JSON.stringify(this.formModel))
        this.readonly = true
      }
      this.initRules()
    },
    initRules() {
      const REQUIRED_MSG = this.CONST.REQUIRED_MSG
      this.rules = {
        environmentCertificateNo: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        clxh: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        sb: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        qcfl: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        cldsbffhwz: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        clzzsmc: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        sccdz: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        cssy: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        status: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }]
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    // 提交新增或修改
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.formModel.environmentCertificateId !== '') {
            // 判断是否修改
            if (JSON.stringify(this.formModel) !== JSON.stringify(this.oldFormModel)) {
              const tip = '修改成功！'
              const url = '/environmentCertificate/update'
              this.post(url, this.formModel).then(res => {
                this.$info(tip, () => {
                  this.$emit('mntSuc', res)
                  this.closeDialog()
                })
              })
            } else {
              this.$emit('mntSuc')
              this.closeDialog()
            }
          } else {
            const url = '/environmentCertificate/save'
            this.post(url, this.formModel).then(res => {
              const tip = '新增成功！'
              this.$info(tip, () => {
                this.$emit('mntSuc', res)
                this.closeDialog()
              })
            })
          }
        }
      })
    },
    closeDialog() {
      this.$parent.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
